<template>
    <div class="container page-component__scroll">
        <el-backtop target=".page-component__scroll"></el-backtop>
            <h2>十方智育欢迎页面</h2>
        
        <el-row class="outer-row" :gutter="30" type="flex" justify="space-around">
            <el-col :span="6">
                <el-card class="box-card" shadow="always" :body-style="{ padding: '15px' }">
                    <el-row :gutter="10" type="flex" justify="space-around">
                        <el-col :span="12">
                                <el-image style="width: 70px; height: 70px;margin-top: 0px"
                                 :fit="'cover'" :src="require('@/assets/imgs/user.png')"></el-image>
                        </el-col>
                        <el-col :span="12">
                            <p style="font-size: 17px; color:gray"><b>用户</b></p>
                            <p style="font-size: 19px;font-weight:600">{{ showInfo.users }}</p>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card" shadow="always" :body-style="{ padding: '15px' }">
                    <el-row :gutter="10" type="flex" justify="space-around">
                        <el-col :span="12">
                                <el-image style="width: 70px; height: 70px;margin-top: 0px"
                                 :fit="'cover'" :src="require('@/assets/imgs/gonggao.png')"></el-image>
                        </el-col>
                        <el-col :span="12">
                            <p style="font-size: 17px; color:gray"><b>公告</b></p>
                            <p style="font-size: 19px;font-weight:600">{{ showInfo.mess }}</p>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card" shadow="always" :body-style="{ padding: '15px' }">
                    <el-row :gutter="10" type="flex" justify="space-around">
                        <el-col :span="12">
                                <el-image style="width: 70px; height: 70px;margin-top: 0px"
                                 :fit="'cover'" :src="require('@/assets/imgs/article.png')"></el-image>
                        </el-col>
                        <el-col :span="12">
                            <p style="font-size: 17px; color:gray"><b>文章</b></p>
                            <p style="font-size: 19px;font-weight:600">{{ showInfo.communities }}</p>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card class="box-card" shadow="always" :body-style="{ padding: '15px' }">
                    <el-row :gutter="10" type="flex" justify="space-around">
                        <el-col :span="12">
                                <el-image style="width: 70px; height: 70px;margin-top: 0px"
                                 :fit="'cover'" :src="require('@/assets/imgs/course.png')"></el-image>
                        </el-col>
                        <el-col :span="12">
                            <p style="font-size: 17px; color:gray"><b>课程</b></p>
                            <p style="font-size: 19px;font-weight:600">{{ showInfo.stores }}</p>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <el-row class="outer-row">
            <el-card style="height: 100%;">
                <div id="chart" style="height: 50vh; width:100%">

                </div>
            </el-card>
        </el-row>
    </div>
</template>
<script>
import elementResizeDetectorMaker from 'element-resize-detector';
import * as echarts from 'echarts';
export default {
    data() {
        return {
            showInfo: {
                users: 1000,
                mess: 111,
                communities: 199,
                stores: 123,
            },
            myChart: null,
        }
    },
    methods: {
        drawEchart() {
            this.myChart = echarts.init(document.getElementById('chart'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '课程销售额'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['课程一', '课程二', '课程三', '课程四', '课程五']
                },
                grid: {
                    left: '2%',
                    right: '3%',
                    bottom: '1%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value',
                    name: '销售额（元）'
                },
                series: [
                    {
                        smooth: true,
                        name: '课程一',
                        type: 'line',
                        // stack: 'Total',
                        data: [120, 132, 101, 390, 90, 230, 210]
                    },
                    {
                        smooth: true,
                        name: '课程二',
                        type: 'line',
                        // stack: 'Total',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        smooth: true,
                        name: '课程三',
                        type: 'line',
                        // stack: 'Total',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        smooth: true,
                        name: '课程四',
                        type: 'line',
                        // stack: 'Total',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        smooth: true,
                        name: '课程五',
                        type: 'line',
                        // stack: 'Total',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            this.myChart.setOption(option);
        }
    },
    mounted() {
        this.drawEchart()
        let erd = elementResizeDetectorMaker()
        erd.listenTo(document.getElementById('chart'), () => {
            this.myChart.resize()
        })
    }
}
</script>

<style scoped>
.container {
    text-align: center;
}

.outer-row {
    margin-top: 15px
}

.box-card {
    height: 100px;
}

.box-card p {
    margin-top: 7px;
}
</style>